<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import chinaJson from './china.json'


let map = ref()  // 获取 组件实例

// 注册中国地图
echarts.registerMap('china', chinaJson)

onMounted(() => {
    // 初始化echarts
    let mycharts = echarts.init(map.value)
    mycharts.setOption({
        title: {
            text: '中国地图',
            textStyle: {
                color: '#29fcff',
            },
            left: 'center',
            top: '20%'
        },
        xAxis: {
            show: false, min: 0, max: 100,
        },
        yAxis: { show: false, type: 'category' },

        geo: [{
            map: 'china',  // 设置注册的地图
            roam: true,  // 设置地图可以缩放和移动
            // zoom:1.1,  // 设置地图初始化的缩放比例
            label: {
                position: 'inside',
                show: true,  // 显示各个地区的名字
                // color: '#f6ff00',
                color: '#79ffff',
                // color: 'DeepSkyBlue',
                // textBorderColor:'white',
                // textBorderWidth:0.5,
            },
            itemStyle: {
                // 设置地图颜色
                color: 'SteelBlue',
                borderColor: 'Cyan',
                borderWidth: 1.5,
                opacity: 0.5,  // 设置地图透明度
            },
            emphasis: {  // 设置当鼠标移动到地区时，样式变化
                label: {
                    show: true,
                    fontSize: 20,
                    color: 'white',
                    fontWeight: 'bolder'
                }
            }
        }],
        series: [
            {
                type: 'lines',
                data: [
                    {
                        coords: [
                            [116, 40],  // 起点
                            [103, 25],   // 终点
                        ],
                        polyline:true,  // 支持多点线段
                        // 统一的样式设置
                        lineStyle: {
                            width: 1,  // 设置线宽
                            color:'Cyan',  // 设置线条颜色
                            cap:'round',  // 设置线段末端的样式 butt方形 round圆角  square方形
                            opacity:1,  // 设置线的透明度
                            curveness:0.2,  // 设置先的曲度
                        }
                    },
                    {
                        coords: [
                            [103, 25],
                            [116, 40,],
                        ],
                        
                        // 统一的样式设置
                        lineStyle: {
                            width: 1,  // 设置线宽
                            color:'Cyan',  // 设置线条颜色
                            cap:'round',  // 设置线段末端的样式 butt方形 round圆角  square方形
                            opacity:1,  // 设置线的透明度
                            curveness:0.2,  // 设置先的曲度
                        }
                    },
                    {
                        coords: [
                            [116, 40,],
                            [85, 42],
                        ],
                        
                        // 统一的样式设置
                        lineStyle: {
                            width: 1,  // 设置线宽
                            color:'Cyan',  // 设置线条颜色
                            cap:'round',  // 设置线段末端的样式 butt方形 round圆角  square方形
                            opacity:1,  // 设置线的透明度
                            curveness:-0.2,  // 设置先的曲度
                        }
                    },
                    {
                        coords: [
                            [116, 40,],
                            [85, 34],
                        ],
                        
                        // 统一的样式设置
                        lineStyle: {
                            width: 1,  // 设置线宽
                            color:'Cyan',  // 设置线条颜色
                            cap:'round',  // 设置线段末端的样式 butt方形 round圆角  square方形
                            opacity:1,  // 设置线的透明度
                            curveness:-0.2,  // 设置先的曲度
                        }
                    },
                    {
                        coords: [
                            [85, 32],
                            [118, 26,],
                        ],
                        
                        // 统一的样式设置
                        lineStyle: {
                            width: 1,  // 设置线宽
                            color:'Cyan',  // 设置线条颜色
                            cap:'round',  // 设置线段末端的样式 butt方形 round圆角  square方形
                            opacity:1,  // 设置线的透明度
                            curveness:-0.2,  // 设置先的曲度
                        }
                    },
                    {
                        coords: [
                            [118, 26,],
                            [96, 37],
                        ],
                        
                        // 统一的样式设置
                        lineStyle: {
                            width: 1,  // 设置线宽
                            color:'Cyan',  // 设置线条颜色
                            cap:'round',  // 设置线段末端的样式 butt方形 round圆角  square方形
                            opacity:1,  // 设置线的透明度
                            curveness:-0.2,  // 设置先的曲度
                        }
                    },
                ],
                // polyline:true,  // 支持多点线段
                effect:{  // 线条特效
                    show:true,  // 显示特效
                    // constantSpeed:60,  // 设置动画速度
                    period:5.5,  // 设置动画几秒完成，单位秒
                    // delay:3000,  // 设置延迟一段时间后，开始动画，单位毫秒
                    symbol:'triangle',  // 设置图标 有以下几种选项 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                    // symbol:'image://public/img/screen/飞机.png',  // symbol也可以设置成指定的图片
                    symbolSize:[8,15],  // 设置特效图标的大小，宽高
                    // color:'red',  // 设置特效图标的颜色
                    trailLength:0.2,  // 设置特效的尾迹时间
                    // roundTrip:true  // 设置图标原路返回
                }
                
            },

        ],
    })
})

</script>

<template>
    <div class="box4" ref="map">

    </div>
</template>

<style scoped lang="scss">
.box2 {
    width: 100%;
    height: 100%;
    // background-color: red;
    background: url('/public/img/screen/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    color: white;
    font-size: 20px;

    .title {
        margin-left: 20px;
    }

    .charts {
        width: 100%;
        height: 260px;
    }
}
</style>